<!-- 调整监考申请记录操作 -->
<template>
  <div class="assessment-container change-record-assessment-container" style="width:100%">
    <div class="search-container" style="padding:0;margin:0">
      <el-form :model="queryParmas" ref="queryForm" :inline="true" v-show="showSearch">
        <div class="search-container-left">
          <div class="search-container-item" style="height:32px">
            <el-form-item label="学期：" prop="termid">
              <el-select v-model="queryParmas.termid" style="width: 120px" placeholder="请选择学期" clearable size="mini">
                <el-option v-for="(item, index) in xqList" :key="index" :label="item.xqmc" :value="item.xqmc">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="search-button" style="margin: 6px 15px 0 0;">
                <img src="../../../assets/assessment/icon-search.png" alt="" style="width:19px;height:19px" />
                <span @click="handleQuery" style="font-size:14px">查询</span>
              </div>
            </el-form-item>
          </div>

        </div>
      </el-form>
    </div>
    <div class="table-container" style="width:100%;margin-top:15px" v-if="roleId == '1490859421955674114' || roleId == '1475294432243830786'">
      <div class="table-header" style="display: -webkit-box;">
        <div class="item" style="width: 138px">操作</div>
        <div class="item" style="width: 138px">状态</div>
        <div class="item" style="width: 138px">日期</div>
        <div class="item" style="width: 100px">节次</div>
        <div class="item" style="width: 100px">系</div>
        <div class="item" style="width: 100px">教研室</div>
        <div class="item" style="width: 110px">课程编号</div>
        <div class="item" style="width: 110px">考试课程</div>
        <div class="item" style="width: 110px">考场</div>
        <div class="item" style="width: 211px">原监考人</div>
        <div class="item" style="width: 211px">调整事由</div>
        <div class="item" style="width: 211px">新监考人</div>
      </div>
      <div class="table-body" v-for="(item, index) in tableData" :key="index" style="display: -webkit-box;">
        <div class="item ztcz" style="width: 138px; ">
          <div class="ztcz-save" style="margin-bottom:0px">
            <span @click="delApplyById(item.id)">删 除</span>
          </div>
        </div>
        <div class="item" style="width:138px">
          <div class="item" style="width: 85px;border:none" v-if="+item.checkstatus === 1">已审批</div>
          <div class="item" style="width: 85px;border:none" v-if="+item.checkstatus === 0">待审批</div>
          <div class="item" style="width: 85px;border:none" v-if="+item.checkstatus === -1">未审批</div>
        </div>
        <div class="item" style="width: 138px">{{ item.exadate.substring(0, 10) }}</div>
        <div class="item" style="width: 100px">{{ item.exaschedule }}</div>
        <div class="item" style="width: 100px">{{ item.department }}</div>
        <div class="item" style="width: 100px">{{ item.teachingandresearchsection }}</div>
        <div class="item" style="width: 110px">{{ item.coursenumber }}</div>
        <div class="item" style="width: 110px">{{ item.coursename }}</div>
        <div class="item-border right-content">
          <div class="right-content-info">
            <div class="item" style="width: 110px">{{ item.exasite }}</div>
            <div class="item" style="width: 211px">{{ item.exaterid }}</div>
            <div class="item" style="width: 211px">{{ item.applyreason }}</div>
            <div class="item" style="width: 211px">{{ item.newteaexam }}</div>
          </div>
          <div class="spjd">
            <div class="spjd-title">审批进度：</div>
            <div class="time-line-horizonAdmin">
              <div class="time-line-block" v-for="(block, index1) in item.examplanchecks" :key="index1">
                <div class="person-name">{{ block.checkuser }}</div>
                <div class="line-content">
                  <img src="../../../assets/assessment/icon-finish.png" alt="已审批" v-if="+block.chstatus === 1" />
                  <img src="../../../assets/assessment/icon-dai.png" alt="待审批" v-if="+block.chstatus === 0" />
                  <img src="../../../assets/assessment/icon-close.png" alt="未审批" v-if="+block.chstatus === -1" />
                  <div class="date-time">
                    <span class="date">{{ block.checktime }}</span>
                    <span class="time">{{ block.chenckdate }}</span>
                  </div>
                </div>
                <div class="operate">
                  <div class="ly-block" @click="buttonClick(block.checkid)">
                    <img src="../../../assets/assessment/icon-ly.png" alt="" />
                    <!-- <div class="ly">留言</div> -->
                  </div>
                </div>
                <div class="operate" v-show="block.checkremark">
                  <div class="bubble-block" style="width:240px;height:70px;background-size: 100% 100%;">
                    <span>{{ block.checkremark }}</span>
                    <div class="operate-button">
                      <!--                         @click="showckMessageDialog = true"-->
                      <div class="button-ck" @click="textSelect(block.checkid)" v-show="block.checkremark">
                        查看
                      </div>
                      <div class="button-bj" @click="textUpdate(block.checkid, block.checkremark)"
                        v-show="block.checkremark">
                        编辑
                      </div>
                      <div @click="textDelete(block.checkid)" class="button-sc" v-show="block.checkremark">
                        删除
                      </div>
                    </div>
                  </div>
                </div>
                <el-dialog title="添加留言" :visible.sync="showAddMessageDialog" width="983px">
                  <div class="message-container">
                    <div>添加留言：</div>
                    <div>
                      <el-input v-model="text" type="textarea" :rows="8" style="width: 550px"></el-input>
                    </div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <button class="green" @click="addText('new')">
                      确 定
                    </button>
                  </span>
                </el-dialog>
                <el-dialog title="编辑留言" :visible.sync="showeditMessageDialog" width="983px">
                  <div class="message-container">
                    <div>编辑留言：</div>
                    <div>
                      <el-input v-model="text" type="textarea" :rows="8" style="width: 550px"></el-input>
                    </div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <button class="green" @click="addText('edit')">
                      确 定
                    </button>
                  </span>
                </el-dialog>
                <el-dialog title="查看留言" :visible.sync="showMessageDialog" width="983px">
                  <div class="message-container">
                    <div>查看留言：</div>
                    <div>
                      <!--                        v-model="block.bjmeaasgeText"-->
                      <el-input v-model="text" type="textarea" :rows="8" style="width: 550px" disabled="false">
                      </el-input>
                    </div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <button class="green" @click="showMessageDialog = false">
                      确 定
                    </button>
                  </span>
                </el-dialog>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="table-container" style="width:100%;margin-top:15px" v-if="roleId === '1490880658945843202'">
      <div class="table-header" style="display: -webkit-box;">
        <div class="item" style="width: 130px">操作</div>
        <div class="item" style="width: 130px">状态</div>
        <div class="item" style="width: 150px">日期</div>
        <div class="item" style="width: 90px">节次</div>
        <div class="item" style="width: 100px">系</div>
        <div class="item" style="width: 100px">教研室</div>
        <div class="item" style="width: 140px">课程编号</div>
        <div class="item" style="width: 150px">考试课程</div>
        <div class="item" style="width: 218.25px">考场</div>
        <div class="item" style="width: 218.25px">原监考人</div>
        <div class="item" style="width: 218.25px">调整事由</div>
        <div class="item" style="width: 218.25px">新监考人</div>
      </div>
      <div class="table-body" v-for="(item, index) in tableData" :key="index" style="display: -webkit-box;">
        <div class="item ztcz" style="width: 130px">
          <!-- <div class="ztcz-save">
            <span @click="delApplyById(item.id)">删 除</span>
          </div> -->
          <div class="ztcz-save" style="">
            <span @click="adoptApplyById(item.id)">审核通过</span>
          </div>
          <div class="ztcz-save">
            <span @click="backApplyById(item.id)">打 回</span>
          </div>
        </div>
        <div class="item ztcz" style="width:130px">
          <div class="item" style="width: 85px;border:none" v-if="+item.checkstatus === 1">已审批</div>
          <div class="item" style="width: 85px;border:none" v-if="+item.checkstatus === 0">待审批</div>
          <div class="item" style="width: 85px;border:none" v-if="+item.checkstatus === -1">未审批</div>
        </div>
        <div class="item" style="width: 150px">{{ item.exadate }}</div>
        <div class="item" style="width: 90px">{{ item.exaschedule }}</div>
        <div class="item" style="width: 100px">{{ item.department }}</div>
        <div class="item" style="width: 100px">{{ item.teachingandresearchsection }}</div>
        <div class="item" style="width: 140px">{{ item.coursenumber }}</div>
        <div class="item" style="width: 150px">{{ item.coursename }}</div>
        <div class="item-border right-content">
          <div class="right-content-info">
            <div class="item" style="width: 218.25px">{{ item.exasite }}</div>
            <div class="item" style="width: 218.25px">{{ item.exaterid }}</div>
            <div class="item" style="width: 218.25px">{{ item.applyreason }}</div>
            <div class="item" style="width: 218.25px">{{ item.newteaexam }}</div>
          </div>
          <div class="spjd">
            <div class="spjd-title">审批进度：</div>
            <div class="time-line-horizon">
              <div class="time-line-block" v-for="(block, index1) in item.examplanchecks" :key="index1">
                <div class="person-name">{{ block.checkuser }}</div>
                <div class="line-content">
                  <img src="../../../assets/assessment/icon-finish.png" alt="已审批" v-if="+block.chstatus === 1" />
                  <img src="../../../assets/assessment/icon-dai.png" alt="待审批" v-if="+block.chstatus === 0" />
                  <img src="../../../assets/assessment/icon-close.png" alt="未审批" v-if="+block.chstatus === -1" />
                  <div class="date-time">
                    <span class="date">{{ block.checktime }}</span>
                    <span class="time">{{ block.chenckdate }}</span>
                  </div>
                </div>
                <div class="operate">
                  <div class="ly-block" @click="buttonClick(block.checkid, block.checkremark)">
                    <img src="../../../assets/assessment/icon-ly.png" alt="" />
                    <!-- <div class="ly">留言</div> -->
                  </div>
                </div>
                <div class="operate" v-show="block.checkremark">
                  <div class="bubble-block" style="width:240px;height:70px;background-size: 100% 100%;">
                    <span>{{ block.checkremark }}</span>
                    <div class="operate-button">
                      <!--                         @click="showckMessageDialog = true"-->
                      <div class="button-ck" @click="textSelect(block.checkid)" v-show="block.checkremark">
                        查看
                      </div>
                      <div class="button-bj" @click="textUpdate(block.checkid, block.checkremark)"
                        v-show="block.checkremark">
                        编辑
                      </div>
                      <div @click="textDelete(block.checkid)" class="button-sc" v-show="block.checkremark">
                        删除
                      </div>
                    </div>
                  </div>
                </div>
                <el-dialog title="添加留言" :visible.sync="showAddMessageDialog" width="983px">
                  <div class="message-container">
                    <div>添加留言：</div>
                    <div>
                      <el-input v-model="text" type="textarea" :rows="8" style="width: 550px"></el-input>
                    </div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <button class="green" @click="addText('new')">
                      确 定
                    </button>
                  </span>
                </el-dialog>
                <el-dialog title="编辑留言" :visible.sync="showeditMessageDialog" width="983px">
                  <div class="message-container">
                    <div>编辑留言：</div>
                    <div>
                      <el-input v-model="text" type="textarea" :rows="8" style="width: 550px"></el-input>
                    </div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <button class="green" @click="addText('edit')">
                      确 定
                    </button>
                  </span>
                </el-dialog>
                <el-dialog title="查看留言" :visible.sync="showMessageDialog" width="983px">
                  <div class="message-container">
                    <div>查看留言：</div>
                    <div>
                      <!--                        v-model="block.bjmeaasgeText"-->
                      <el-input v-model="text" type="textarea" :rows="8" style="width: 550px" disabled="false">
                      </el-input>
                    </div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <button class="green" @click="showMessageDialog = false">
                      确 定
                    </button>
                  </span>
                </el-dialog>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    打回-->
    <el-dialog
      title="驳回选择"
      :visible.sync="showExportReportDialog"
      width="1185px"
      class="manual-entry-container"
    >
      <!-- <div class="manual-entry-container">
        <el-row>
          <el-col :span="12">
            <div style=" background: rgba(77, 129, 192, 0.1);">打回至:</div>
          </el-col>
          <el-col :span="12">
            <el-radio-group v-model="reportTypep">
              <el-radio
                :label="item.label"
                v-for="(item, index) in reportTypepss"
                :key="index"
                class="large"
              >{{ item.value }}
              </el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
      </div> -->
      <div class="message-container">
        <div>打回原因：</div>
        <div>
          <el-input
            v-model="meaasgeText"
            type="textarea"
            :rows="8"
            style="width: 550px;"
            placeholder="请输入打回原因"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ubohuipdateById">确 定</el-button>
         <el-button type="warning" @click="showExportReportDialog = false" style="margin-left:10% ">取消</el-button>
      </span>
    </el-dialog>
    <el-pagination style="width:auto;margin-top: 15px;float:right;margin-bottom:50px;padding:0"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryParmas.current"
      :page-sizes="[5, 10, 20, 30, 50, 100, 200]" :page-size="queryParmas.size"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>


</template>

<script>

import { checkUpdate, exaTeacherCheck, remove, selectDetail } from "../../../api/courseExame/coursePlan";
import { selectDetailsJob,teaCheckNoPass } from "@/api/courseAchievement/entryResults";
import { reqGetXqList } from "@/api/admin1/check";
import { toTeaCheckPass } from "@/api/teacher/admin";
import { getStore } from '@/util/store.js'

export default {
  data() {
    return {
      reportTypep: "",
      reportTypepss: [
        {label: "教员", value: "教员"}
      ],
      meaasgeText:'',
      showExportReportDialog:false,
      total: '',
      pid: undefined,
      text: undefined,
      xq: "",
      xqList: [],
      showSearch: true,
      queryParmas: {
        current: 1,
        size: 10,
        termid: "",
        // applyname: ""
      },
      tableData: [],
      //添加留言
      showAddMessageDialog: false,
      //编辑留言
      showeditMessageDialog: false,
      //查看留言
      showMessageDialog: false,
      meaasgeText: "",
      roleId: '',
      yprList: [],
      aId:'',
    };
  },
  created() {
    const userInfo = getStore({
      name: "userInfo",
      debug: true,
    }) || {}
    this.roleId = userInfo.content.role_id;
    console.log(this.roleId)
  },
  mounted() {
    this.termAll();
    this.getTeacher();
  },
  methods: {
    backApplyById(id){
      this.aId = id;
      this.showExportReportDialog = true;
      this.meaasgeText = ''
    },
    // 打回确定
    ubohuipdateById() {
      if (this.meaasgeText == '') {
        this.$message.error('两者不能有空值！');
        return
      } else {
        return new Promise(() => {
          //网上评教修改保存
          teaCheckNoPass(this.aId,this.meaasgeText).then(res => {
            if (res.data.code === 200) {
              this.showExportReportDialog = false
              this.queryExaApplyList();
            }
          })
        })
      }
    },
    //获取监考员
    getTeacher() {
      let teacherInfo = {
        bzbm: this.company,
        xm: this.courseYpr
      };
      selectDetailsJob(teacherInfo).then(res => {
        if (res.data.code == 200) {
          this.yprList = res.data.data;
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].exaterid.indexOf(',') != -1) {
              let exaT = this.tableData[i].exaterid.split(',');
              if (exaT[i] == this.yprList[i].id) {
                console.log(this.yprList[i].name)
              }
            }
          }
        }
      })
    },
    handleCurrentChange(val) {
      this.queryParmas.current = val;
      this.queryExaApplyList();
    },
    handleSizeChange(val) {
      this.queryParmas.size = val;
      this.queryExaApplyList();
    },
    // 获取学期
    async termAll() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.xqList = result.data.data.length > 0 ? result.data.data : [];
        this.queryParmas.termid = result.data.data.length > 0 ? result.data.data[0].xqmc : '';
        this.queryExaApplyList();
      }
    },
    //查询
    handleQuery() {
      this.queryParmas.current = 1;
      this.queryExaApplyList();
    },
    //表格列单条删除
    delApplyById(id) {
      this.$confirm('确认要删除吗？')
        .then(_ => {
          remove(id).then(res => {
            if (res.data.code == 200) {
              this.$message({
                showClose: true,
                message: '删除成功',
                type: 'success'
              });
              this.queryExaApplyList();
            }
          })
        })
    },
    //表格列单条通过审核
    adoptApplyById(id) {
      console.log('hahah', id)
      toTeaCheckPass(id).then(res => {
        if (res.data.code == 200) {
          this.$message({
            showClose: true,
            message: '通过成功',
            type: 'success'
          });
          this.queryExaApplyList();
        }
      })
    },
    //表格数据
    queryExaApplyList() {
      exaTeacherCheck(this.queryParmas).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.records;
          if (this.tableData.length <= 0) {
            this.$message({
              type: 'info',
              message: '暂无数据!'
            })
          }
          this.total = res.data.data.total
        }
      })
    },
    //新增留言
    buttonClick(cId) {
      this.showAddMessageDialog = true;
      this.text = '';
      this.pid = cId;
    },
    //查看留言
    textSelect(cId) {
      this.showMessageDialog = true;
      selectDetail(cId).then(res => {
        this.text = res.data.data.checkremark;
      })
    },
    //编辑留言
    textUpdate(cId) {
      this.showeditMessageDialog = true;
      selectDetail(cId).then(res => {
        this.text = res.data.data.checkremark;
      });
      this.pid = cId;
    },
    //删除留言
    textDelete(cId) {
      let obj = {
        checkid: cId,
        checkremark: '',
      }
      this.$confirm('确认要删除吗？')
        .then(_ => {
          checkUpdate(obj).then(res => {
            if (res.data.code == 200) {
              this.$message({
                showClose: true,
                message: '删除成功',
                type: 'success'
              });
              this.queryExaApplyList();
            }
          })
        })
    },
    //新增点击确定
    addText(info) {
      this.update(info);
    },
    update(info) {
      console.log(info)
      let obj = {
        checkid: this.pid,
        checkremark: this.text,
      }
      checkUpdate(obj).then(res => {
        this.$message({
          showClose: true,
          message: '操作成功',
          type: 'success'
        });
        if (info == 'new') {
          this.showAddMessageDialog = false;
        } else if (info == 'edit') {
          this.showeditMessageDialog = false;
        }
        this.queryExaApplyList();
      })
    },
    change() {
      this.$nextTick(() => {
        let nodelist = document.querySelectorAll(".el-select__tags-text");
        if (nodelist.length >= 2) {
          nodelist[1].innerText = `(已选${this.zt.length})`;
        }
      });
    },
    toChangePlanDetail() {
      this.$router.push("/teacher/assessment/changeRecordDetail");
    },
  },
};
</script>


<style lang="less" scoped>
@import "../../../styles/delayedExam.less";
.message-container {
  margin-top: 30px;
  > div {
    display: inline-block;

    &:nth-child(1) {
      padding-left: 111px;
      font-size: 20px;
      color: rgba(0, 76, 167, 1);
      font-weight: bold;
      vertical-align: top;
    }

    &:nth-child(2) {
    }
  }
}
@import "../../../styles/plan.less";
@import "../../../styles/plan-record.less";
/deep/.el-form--inline .el-form-item__label {
  color: #004ca7;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

.spjd {
  .spjd-title {
    // margin: 10px 0 0 118px !important;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #004ca7;
  }

  .time-line-horizon {
    position: relative;
    margin-left: 92px;
    display: flex;
    flex-direction: row;
    justify-content: center;

    &::before {
      content: "";
      position: absolute;
      top: 35px;
      left: 65px;
      width: 520px !important;
      border-bottom: 2px dashed #4b78ac;
    }


    .time-line-block {
      display: flex;
      flex-direction: column;
      width: 260px;

      &:last-child {
        width: 140px;
      }

      .person-name {
        font-size: 14px;
        height: 15px;
        line-height: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #004ca7;
        width: 50%;
        position: relative;
        left: -20%;
        text-align: center;
      }

      .line-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 40px;
        z-index: 100;

        >img {
          width: 26px;
          height: 26px;
        }

        .date-time {
          display: flex;
          flex-direction: column;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #004ca7;

          .date,
          .time {
            margin: 3px 8px;
          }
        }
      }

      .operate {
        margin-top: 5px;
        position: relative;

        .ly-block {
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          left: -8px;
          width: 40px;

          >img {
            width: 33px;
            height: 33px;
          }

          .ly {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #f1b107;
          }
        }

        .bubble-block {
          cursor: pointer;
          left: -50px;
          width: 240px;
          height: 70px;
          background: url(../../../assets/assessment/bubble.png) center no-repeat;
          background-size: 100% 100%;
          position: relative;
          padding: 15px 10px 5px;
          box-sizing: border-box;

          >span {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 20px;
            color: #004ca7;
          }

          .operate-button-list {
            position: absolute;
            bottom: 8px;
            right: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0 3px;

            >div {
              width: 37px;

              box-sizing: border-box;
              background: #fff6dc;
              border: 1px solid #f1b107;
              border-radius: 4px;
              margin-left: 6px;
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: 400;

              color: #f1b107;
              text-align: center;
            }

            .button-ck {
              background: #fff6dc;
              border: 1px solid #f1b107;
              color: #f1b107;
            }

            .button-bj {
              background: #ffefef;
              border: 1px solid #fa5339;
              color: #fa5339;
            }

            .button-sc {
              background: #f1f8fe;
              border: 1px solid #51aef6;
              color: #51aef6;
            }
          }
        }
      }
    }
  }

  .time-line-horizonAdmin {
    position: relative;
    margin-left: 92px;
    display: flex;
    flex-direction: row;
    justify-content: center;

    &::before {
      content: "";
      position: absolute;
      top: 35px;
      left: 0px;
      width: 500px !important;
      border-bottom: 2px dashed #4b78ac;
    }


    .time-line-block {
      display: flex;
      flex-direction: column;
      width: 260px;

      &:last-child {
        width: 140px;
      }

      .person-name {
        font-size: 14px;
        height: 15px;
        line-height: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #004ca7;
        width: 50%;
        position: relative;
        left: -20%;
        text-align: center;
      }

      .line-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 40px;
        z-index: 100;

        >img {
          width: 26px;
          height: 26px;
        }

        .date-time {
          display: flex;
          flex-direction: column;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #004ca7;

          .date,
          .time {
            margin: 3px 8px;
          }
        }
      }

      .operate {
        margin-top: 5px;
        position: relative;

        .ly-block {
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          left: -8px;
          width: 40px;

          >img {
            width: 33px;
            height: 33px;
          }

          .ly {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #f1b107;
          }
        }

        .bubble-block {
          cursor: pointer;
          left: -50px;
          width: 240px;
          height: 70px;
          background: url(../../../assets/assessment/bubble.png) center no-repeat;
          background-size: 100% 100%;
          position: relative;
          padding: 15px 10px 5px;
          box-sizing: border-box;

          >span {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 20px;
            color: #004ca7;
          }

          .operate-button-list {
            position: absolute;
            bottom: 8px;
            right: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0 3px;

            >div {
              width: 37px;

              box-sizing: border-box;
              background: #fff6dc;
              border: 1px solid #f1b107;
              border-radius: 4px;
              margin-left: 6px;
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: 400;

              color: #f1b107;
              text-align: center;
            }

            .button-ck {
              background: #fff6dc;
              border: 1px solid #f1b107;
              color: #f1b107;
            }

            .button-bj {
              background: #ffefef;
              border: 1px solid #fa5339;
              color: #fa5339;
            }

            .button-sc {
              background: #f1f8fe;
              border: 1px solid #51aef6;
              color: #51aef6;
            }
          }
        }
      }
    }
  }
}

.message-container {
  >div {
    display: inline-block;

    &:nth-child(1) {
      padding-left: 111px;
      font-size: 20px;
      color: rgba(0, 76, 167, 1);
      font-weight: bold;
      vertical-align: top;
    }

    &:nth-child(2) {}
  }
}
</style>
